Fox 3.0 Router 参数传递

路径参数传递

fox router允许把参数附加在path上面，并传递到子页面中

代码摘要

例子代码：sites/example/pages/params-pass

子页面

template: '<div>User {{ $route.params.id }}</div>'

路由配置

 const routes = [
       {
           path: '/user/:id',
           component:User,
       }
]

JS代码

this.$router.push({
      path:'/user/江成',
      root:'_sys_root'
 })

说明

路由配置/user/:id, :id为参数的插槽，而导航中path：/user/江成中的'江成'就是对于中:id,在子页面中，我们通过$route.params.id就能获取到数据'江成'

代码参数传递

fox router在编程导航中，一般把参数放在params属性中进行传递

代码摘要

index.ts（路由注册）

/*
 * @version: 1.0
 * @Author: 江成
 * @Date: 2021-07-28 10:23:05
 */

//路由表
let routes = [
    {
        path:'/',
        redirect:'/home'
    },
    {
        path:'/home',
        component:()=>import('./components/home.vue'),
    },
    {
        path:'/about',
        component:()=>import('./components/about.vue'),
    },
]
export let FoxApp = {

    /***
     * 安装
     */
    install(fox:any){
        //设置404页面
        fox.router.setNotFoundRoute( {
            path:'/notFound',
            component: ()=>import('../not-found/index.vue'),
        },)
        //加入路由
        fox.router.addRoutes(routes)
    }

} 

index.vue（数据传递）

<!--
 * @version: 1.0
 * @Author: 江成
 * @Date: 2021-07-28 10:23:13
-->
<template>
    <div>
        <button class="my-button" @click="toHome">go home</button>
        <button class="my-button" @click="toAbout">go about</button>
    </div>
     <div>
         <fox-router-view  :multi=false></fox-router-view>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useFox } from '../../assets/libs/fox-v3.0.0/index'
import { FoxApp } from './index'

export default defineComponent({
    setup() {
        //获取 fox
        let fox = useFox()!
        //安装路由
        FoxApp.install(fox)
        //获取 router
        let router = fox.router
        let toHome = ()=>{
            //参数 target: 路由path，data: 页面传递数据，root: 替换的fox-router-view的名称
             router.push('/home', {'target':'home'})
        }
        let toAbout = ()=>{
             //参数 target: 路由path，data: 页面传递数据，root: 替换的fox-router-view的名称
            router.push('/about', {'target':'about'})
        }
        return {
            toHome,
            toAbout
        }
    },
})
</script>

home.vue（数据接收）

<!--
 * @version: 1.0
 * @Author: 江成
 * @Date: 2021-06-06 07:03:51
-->
<template>
    <div>Home</div>
    <div><input ref="input" type='text' :value="textValue" 
    @change="onChange" @input="onInput"/></div>
</template>
<script lang="ts">
import { defineComponent,computed,ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from '../../../assets/libs/fox-v3.0.0/index'

export default defineComponent({
    //属性
    props:{
        modelValue:{
            type:[String]
        }
    },
    //setup函数
    setup(props, context) {
        onMounted(()=>{
            console.info('>>>> on mounted(home)')
        })
        onUnmounted(()=>{
            console.info('---- on unmounted(home)')
        })
       
    
        let innerValue = ref<string>('')
        let route = useRoute()
        if(route && route.params){
            innerValue.value = route.params['target']
        }

        let textValue = computed(()=>{
            return innerValue.value ?? props.modelValue
        })

        let input = ref(null)
        let onChange = ()=>{
            let val = ''
            let inputNode:any = input.value
            if(inputNode){
                val = inputNode.value ?? ''
            }
            innerValue.value = val
            context.emit('update:modelValue', val)
        }
        let onInput = ()=>{
            let val = ''
            let inputNode:any = input.value
            if(inputNode){
                val = inputNode.value ?? ''
            }
            innerValue.value = val
            context.emit('update:modelValue', val)
        }
        return {
            onChange,
            onInput,
            input,
            textValue
        }
    },
})
</script>